<template>
  <Box title="设备安装分布" style="margin-top: 40px">
    <div v-if="list.length" class="list">
      <div v-for="(item, index) in list" class="item">
        <div class="title">
          <span :style="'background-color:' + colors[index]" class="tag"> {{ index + 1 }}</span>
          {{ item.customerName }}
        </div>
        <div class="data">
          <div class="bar-wrap">
            <div :style="'width:' + item.percent" class="bar"></div>
          </div>
          <span class="num">{{ item.num }}</span>
        </div>
      </div>
    </div>
    <div v-else class="list"></div>
  </Box>
</template>

<script setup lang="ts">
import Box from '@/components/Box.vue'
import { ref } from 'vue'
import { getDeviceDistribution } from '@/api'
import useInterval from '@/hooks/useInterval'
import config from '@/utils/config'
const list: any = ref([])
const loading = ref(true)
const colors = ['#d20c12', '#ebbe45', '#c2880d', '#7abff2', '#7abff2']
useInterval(() => {
  getDeviceDistribution({}).then((res: any) => {
    const max = res.reduce((pre: number, cur: any) => {
      // return pre + cur.num
      if (pre < cur.num) return cur.num
      else return pre
    }, 0)
    list.value = res.slice(0, 5).map((v: any) => ({
      ...v,
      percent: (v.num / max) * 100 + '%'
    }))
    loading.value = false
  })
}, config.internalTime)
</script>

<style lang="scss" scoped>
.list {
  background-color: rgba(#142c55, 0.5);
  padding: 14px 20px 42px 20px;
  .item {
    margin-top: 6px;
    color: #fff;
    .title {
      display: flex;
      align-items: center;
      font-size: 14px;
      .tag {
        margin-right: 10px;
        border-radius: 50%;
        width: 14px;
        font-size: 12px;
        height: 14px;
        line-height: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: red;
      }
    }
    .data {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 2px;
      .num {
        margin-left: 8px;
        font-size: 12px;
      }
      .bar-wrap {
        width: 100%;
        height: 8px;
        background-color: #bfced9;
        overflow: hidden;
        margin-right: 10px;
        border-radius: 8px;
        .bar {
          width: 40%;
          height: 100%;
          background-color: #45a0e3;
          // #d20c12  #ebbe45  #c2880d  #7abff2 #7abff2
        }
      }
    }
  }
}
</style>
